<template>
	<view class="content">
		<view class="navbar">
			<view  class="navbaritem"   v-for="(item,index3) of title" :key="index3" @click="navto(index3)">
				<text :class="currentIndex==index3?'botline':''">{{item.title}}</text>
			</view>	
		</view>
		<view class="shebei" v-if="currentIndex==0">
			<view class="shebeibox" v-for="item of jisuanfuwuqilist" :key ="item.id">
				<view class="title">
					计算服务器（运行中:{{run_compute}} 停机中:{{tot_compute-run_compute}}）
				</view>
				<view class="changping">
					<view class="tupian">
						<image :src="$base_url+item.cover" mode=""></image>
						<text class="dingwei">{{item.status}}</text>
						<text v-if="item.status=='停机中'" style="background-color: red;" class="dingwei">{{item.status}}</text>
					</view>
					<view class="zhong">
						<view class="zhongtit1">
							{{item.name}}
						</view>
						<view class="zhongtit2">
							设备编号：{{item.sn}}
						</view>
					</view>
					<!-- <view class="youxia">
						<switch :checked="open"  @change="switch2Change" />
					</view> -->
				</view>
				
			</view>
			<view class="shebeibox" v-for="(item1) of cucunfuwuqi" :key="item1.id">
				<view class="title">
					存储服务器
				</view>
				<view class="changping">
					<view class="tupian">
						<image :src="$base_url+item1.cover" mode=""></image>
						<text class="dingwei">{{item1.status}}</text>
					</view>
					<view class="zhong">
						<view class="zhongtit1">
							{{item1.name}}
						</view>
						<view class="zhongtit2">
							设备编号：{{item1.sn}}
						</view>
					</view>
					
				</view>
				
			</view>
		</view>
		<view class="yunxingjilu" v-if="currentIndex==1">
			<uni-collapse accordion="true">
			    <uni-collapse-item v-for="(item,index2) of yunxingjilu" :key="index2" :title="item.create_at|formatDate" :open="currentIndex1==index2?true:false">
			        <view style="padding: 30rpx;">
			            <view class="row1">
			            	<text>设备名称</text>
							<text>运行数量</text>
			            </view>
						<view class="row2">
							<text>{{item.compute_name}}</text>
							<text>{{item.compute_num}}台</text>
						</view>
						<view class="row2">
							<text>{{item.machine_name}}</text>
							<text>{{item.machine_num}}台</text>
						</view>
			        </view>
			    </uni-collapse-item>
			    
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:[
					{
						id:1,
						title:'我的设备'
					},
					{
						id:2,
						title:'运行记录'
					},
			
				],
				currentIndex:0,
				currentIndex1:0,
				open:true,
				run_compute:'',
				tot_compute:'',
				cucunfuwuqi:[],
				yunxingjilu:[],
				jisuanfuwuqilist:[],
				
			}
		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			// 动态管理导航栏右侧按钮
			onNavigationBarButtonTap(e){	
				
				uni.navigateTo({
					url:'./yunxingjilu'
				})
			},
			navto(index){
				 this.currentIndex = index
			},
			switch2Change: function (e) {
			    console.log('switch2 发生 change 事件，携带值为', e.target.value)
			},
			getinfo(){
				var token =uni.getStorageSync('token')
				if(token==''||token==null){
					uni.reLaunch({
					    url:'../../login/login'
					})
				}else{
					this.http({
					 	url:'/api/User/myCompute',
					 	method:'POST',
						header:{
							'token':token
						},
					 	success:(res)=>{
							console.log(res)
							console.log('11111111111')
							this.run_compute = res.data.run_compute
							this.tot_compute = res.data.tot_compute
							this.jisuanfuwuqilist = res.data.data
						},
					 	error:()=>{
					 		uni.showToast({
					 			title:"请求异常"	
					 		})
					 	},
						complete:(res)=>{
							console.log(res.code)
							// token过期的处理方式
							if(res.code==1201){
								uni.removeStorage({
									key:'token'
								})
								uni.reLaunch({
									url:'../../login/login'
								})
							}
						}
					 })
					this.http({
					 	url:'/api/User/myMachine',
					 	method:'POST',
						header:{
							'token':token
						},
					 	success:(res)=>{
							console.log(res)
							console.log('2222222222')
							this.cucunfuwuqi =res.data
						},
					 	error:()=>{
					 		uni.showToast({
					 			title:"请求异常"	
					 		})
					 	},	
					 })
					this.http({
					 	url:'/api/User/runMachineLogs',
					 	method:'POST',
						header:{
							'token':token
						},
					 	success:(res)=>{
							console.log(res)
							console.log('记录')
							this.yunxingjilu = res.data
						},
					 	error:()=>{
					 		uni.showToast({
					 			title:"请求异常"	
					 		})
					 	},	
					 })
				} 
			}
		}
	}
</script>

<style lang="scss">

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		color:#2b2b2b;
		padding-bottom: 50rpx;
		.navbar{
			width: 690rpx;
			height: 98rpx;
			
			margin: 20rpx auto;
			display: flex;
			justify-content: space-around;
			
			.navbaritem{	
				height: 98rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #2B2B2B;
				line-height: 98rpx;
			}
		}
		.botline{
			color: #007AFF;
			padding-bottom: 5px;
			border-bottom:  4px solid #007AFF;
		}
		.shebeibox{
			width: 690rpx;
			height: 260rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 2px 0px rgba(43, 43, 43, 0.18);
			border-radius: 10rpx;
			margin: 25rpx auto 50rpx auto;
			.title{
				margin: 0 0 22rpx 30rpx;
				padding-top: 29rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			.changping{
				width: 630rpx;
				display: flex;
				align-items: center;
				margin: 0 auto;
				.tupian{
					width: 200rpx;
					height: 146rpx;
					border-radius: 10rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
					.dingwei{
						position: absolute;
						top: 0;
						left: 0;
						height: 30rpx;
						background: #0072FF;
						border-radius: 10rpx 0 0 0 ;
						text-align: center;
						font-size: 20rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 30rpx;
					}
				}
				.zhong{
					flex: 1;
					font-size: 28rpx;
					.zhongtit1{
						font-weight: bold;
						text-align: center;
					}
					.zhongtit2{
						color: #CCCCCC;
						text-align: center;
						margin: 27rpx auto;
					}
				}
				.youxia{
					height: 146rpx;
					switch{
						margin-top: 85rpx;
					}
					
				}
			}
		}
		.uni-collapse-cell{
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 2px 0px rgba(43, 43, 43, 0.18);
			border-radius: 10rpx;
			margin: 10rpx auto;
			font-size: 26rpx;
		}
		.row1{
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			font-size: 26rpx;
		}
		.row2{
			display: flex;
			justify-content: space-between;
			color: #CCCCCC;
			margin: 10rpx auto;
			font-size: 26rpx;
		}
	}

	
</style>
